<template>
  <view class="repair-detail-container">

    <!-- 维修信息部分 -->
    <view class="section">
      <view class="section-title">维修信息</view>
      <view class="info-item">
        <text class="info-label">维修单号：</text>
        <text class="info-value">{{ repairInfo.repairNumber }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">车主姓名：</text>
        <text class="info-value">{{ repairInfo.ownerName }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系方式：</text>
        <text class="info-value">{{ repairInfo.contactNumber }}</text>
        <view class="call-icon" @click="makeCall">
          <text>📞</text>
        </view>
      </view>
      <view class="info-item">
        <text class="info-label">维修方式：</text>
        <text class="info-value">{{ repairInfo.repairType }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">取车位置：</text>
        <text class="info-value">{{ repairInfo.pickupLocation }}</text>
        <view class="location-icon" @click="viewLocation">
          <text>📍</text>
        </view>
      </view>
      <view class="info-item">
        <text class="info-label">预约日期：</text>
        <text class="info-value">{{ repairInfo.appointmentDate }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">提交日期：</text>
        <text class="info-value">{{ repairInfo.submissionDate }}</text>
      </view>
    </view>

    <!-- 车辆信息部分 -->
    <view class="section">
      <view class="section-title">车辆信息</view>
      <view class="info-item">
        <text class="info-label">车辆类型：</text>
        <text class="info-value">{{ vehicleInfo.type }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">车牌号：</text>
        <text class="info-value">{{ vehicleInfo.plateNumber }}</text>
      </view>
    </view>

    <!-- 车辆照片部分 -->
    <view class="section">
      <view class="section-title">整车照片</view>
      <view class="photo-container">
        <image :src="vehicleInfo.vehiclePhoto" mode="aspectFill" class="vehicle-photo"></image>
      </view>
    </view>

    <!-- 维修部位照片部分 -->
    <view class="section">
      <view class="section-title">维修部位照片</view>
      <view class="photos-grid">
        <image v-for="(photo, index) in repairInfo.damagePhotos" :key="index" :src="photo" mode="aspectFill" class="damage-photo"></image>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-button-container">
      <button class="confirm-button" @click="confirmArrival">确认到场</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 维修信息数据 - 直接使用静态数据初始化
const repairInfo = ref({
  repairNumber: '3353252',
  ownerName: '张三',
  contactNumber: '1993829282',
  repairType: '上门取车/到店维修',
  pickupLocation: '山阳区32号',
  appointmentDate: '2022/11/10 11:00',
  submissionDate: '2022/11/08 12:34',
  damagePhotos: [
    '/static/logo.png',
    '/static/logo.png',
    '/static/logo.png'
  ]
});

// 车辆信息数据 - 直接使用静态数据初始化
const vehicleInfo = ref({
  type: '大客车',
  plateNumber: '豫J45323',
  vehiclePhoto: '/static/logo.png'
});

// 返回上一页
const handleBack = () => {
  uni.navigateBack();
};

// 拨打电话
const makeCall = () => {
  uni.makePhoneCall({
    phoneNumber: repairInfo.value.contactNumber,
    success: () => {
      console.log('拨打电话成功');
    },
    fail: (err) => {
      console.error('拨打电话失败:', err);
    }
  });
}
// 查看位置
const viewLocation = () => {
  uni.openLocation({
    latitude: 35.2461,
    longitude: 113.3948,
    name: '取车位置',
    address: repairInfo.value.pickupLocation,
    success: () => {
      console.log('打开地图成功');
    },
    fail: (err) => {
      console.error('打开地图失败:', err);
    }
  });
}
// 确认到场
const confirmArrival = () => {
  uni.showModal({
    title: '确认到场',
    content: '确定要确认车辆已到场吗？',
    success: (res) => {
      if (res.confirm) {
        // 在实际应用中，这里应该调用后端API进行确认
        uni.showToast({
          title: '确认成功',
          icon: 'success'
        });
      }
    }
  });
}  
</script>

<style lang="scss" scoped>
.repair-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 页面头部 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left,
.header-right {
  width: 60rpx;
  text-align: center;
}

.back-icon {
  font-size: 48rpx;
  color: #333333;
}

.header-title {
  font-size: 36rpx;
  color: #333333;
  font-weight: 600;
}

/* 信息区块 */
.section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eeeeee;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666666;
  width: 160rpx;
  flex-shrink: 0;
}

.info-value {
  font-size: 28rpx;
  color: #333333;
  flex: 1;
}

.call-icon,
.location-icon {
  margin-right:200rpx;
  font-size: 32rpx;
}

/* 照片展示 */
.photo-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 20rpx;
}

.vehicle-photo {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
}

.photos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 20rpx;
}

.damage-photo {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
}

/* 底部按钮 */
.bottom-button-container {
  padding: 30rpx;
  background-color: #ffffff;
  margin-top: 20rpx;
  position: sticky;
  bottom: 0;
}

.confirm-button {
  width: 100%;
  background-color: #1989fa;
  color: #ffffff;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
}
</style>